<template>
  <div class="mainContainer">
    <headerComp class="header"></headerComp>
    <div class="contentCard">
      <div class="contentHeader">
        <div class="contentHeaderTop">
          <span class="workTitle" v-text="workData.name"></span>
          <div class="workMeta">
            <i class="fa fa-eye workMetaData"></i>
            <span class="workMetaData" v-text="workData.views"></span>
            <i class="fa fa-comments workMetaData"></i>
            <span class="workMetaData" v-text="workReply.length"></span>
          </div>
        </div>
        <div class="contentHeaderBottom">
          <div class="headerBottomLeft">
            <el-avatar class="ownerAvatar" :src="'http://localhost:10001/head/' + this.ownerData.id + '.jpg'"></el-avatar>
          </div>
          <div class="headerBottomRight">
            <span class="ownerInfo" v-text="ownerData.name"></span>
            <span class="ownerInfo" v-text="workData.createDate"></span>
          </div>
        </div>
      </div>
      <div class="contentBody" v-html="workContent">
      </div>
      <div class="contentDownloads">
        <span class="downloadTitle">资源下载</span>
        <div class="downloadWrapper">
          <span v-if="workAssets.length === 0">没有资源可以下载哦~</span>
          <div v-else>
            <div v-for="asset in workAssets" v-bind:key="asset.id" class="workAsset">
              <span class="assetName" v-text="asset.name"></span>
              <div class="assetMeta">
                <span class="assetUploadTime" v-text="asset.uploadTime"></span>
                <i class="fa fa-download downloadsIcon" aria-hidden="true"></i>
                <span class="downloads" v-text="asset.downloads"></span>
                <span class="downloadButton" @click="downloadAsset(asset)">点击下载</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="replyCard">
      <h2 v-text="'全部评论: ' + workReply.length"></h2>
      <span class="noReply" v-if="workReply.length === 0">暂时没有评论哦~</span>
      <div v-else class="replyWrapper">
        <div class="reply" v-for="aReply in workReply" v-bind:key="aReply.id">
          <div class="replySenderContainer">
            <el-avatar class="replySenderAvatar" :src="'http://localhost:10001/head/' + aReply.senderID + '.jpg'"></el-avatar>
            <div class="senderRight">
              <span class="senderInfo" v-text="aReply.senderName"></span>
              <span class="senderInfo" v-text="aReply.sendDate"></span>
            </div>
          </div>
          <span class="replyContent" v-text="aReply.content"></span>
          <div class="replyMeta">
            <i :class="['fa', 'fa-thumbs-o-up', aReply.liked ? 'liked' : '', 'likeIcon']" @click="changeReplyLikeState(aReply)" aria-hidden="true"></i>
            <span class="replyLikes" v-text="aReply.likes"></span>
          </div>
        </div>
      </div>
      <div class="writeReplyContainer">
        <el-input class="replyArea" type="textarea" :rows="3" v-model="createReplyContent" resize="none" placeholder="发条友善的评论吧~"></el-input>
        <el-button class="button sendReplyButton" @click="createReply" type="primary">发送</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import header from './header'
import work from '../api/work'
import reply from '../api/reply'
import { getUserInfo, isLogined } from '../util/userutil'
import { assetsAxios } from '../api/base'

export default {
  name: 'work',
  components: {
    headerComp: header
  },
  data () {
    return {
      workData: null,
      workContent: '',
      workReply: null,
      workAssets: null,
      ownerData: null,
      createReplyContent: ''
    }
  },
  methods: {
    downloadAsset: function (asset) {
      let aid = asset.aid
      let url = 'http://localhost:40000/downloadWorkAsset?aid=' + aid
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    changeReplyLikeState: function (aReply) {
      if (!isLogined()) {
        this.$message.error('请先登录!')
      }
      let newState = !aReply.liked
      reply.changeLikeState(this, aReply.rid, newState)
      aReply.liked = newState
      aReply.likes = newState ? aReply.likes + 1 : aReply.likes - 1
    },
    createReply: function () {
      if (!isLogined()) {
        this.$message.error('请先登录！')
        return
      }
      reply.addReply(this, this.createReplyContent, this.workData.wid).then(resp => {
        window.location.reload()
      })
      this.createReplyContent = ''
    }
  },
  created () {
    let wid = this.$route.params.wid
    work.queryWorkById(this, wid).then(resp => {
      this.workData = resp
      getUserInfo(resp.ownerID).then(ownerInfo => {
        this.ownerData = ownerInfo
      })
      reply.queryWorkReplies(this, wid, resp => {
        this.workReply = resp.data
        this.workReply.forEach(aReply => {
          reply.queryReplyLikesById(this, aReply.rid, resp => {
            this.$set(aReply, 'likes', resp.data)
          })
        })
        if (isLogined()) {
          this.workReply.forEach(aReply => {
            reply.isReplyLiked(this, aReply.rid, resp => {
              this.$set(aReply, 'liked', resp.data)
            })
          })
        }
      })
      work.queryWorkAssets(this, wid).then(resp => {
        this.workAssets = resp
      })
      assetsAxios.get('/', {
        params: {
          id: wid
        }
      }).then(resp => {
        this.workContent = resp.data
      })
    })
  }
}
</script>

<style src="../style/work.less" lang="less"></style>
